<template>
  <div class="home">
    <my-header @maskFtn="isMask = !isMask"></my-header>
    <my-input @add="addList"></my-input>
    <my-list :toList="list"></my-list>
    <my-mask :show="isMask">
      <ul v-if="!isColor">
        <li @click="cutColor" :style="{ background: $store.state.itemColor }">切换主题</li>
        <li :style="{ background: $store.state.itemColor }">下载数据</li>
        <li :style="{ background: $store.state.itemColor }">导入数据</li>
        <li :style="{ background: $store.state.itemColor }">编辑数据</li>
        <li :style="{ background: $store.state.itemColor }">清空数据</li>
      </ul>
      <div v-else class="back-ct">
         <h4>点击切换主题色</h4>
         <ul>
           <li class="color-ct" v-for="(item,index) in $store.state.colorList" :key="index" @click="hideColor(item)">
              <span :style="{background:item}"></span>
              {{item}}
           </li>
         </ul>
      </div>
    </my-mask>
  </div>
</template>

<script>
import MyHeader from "../components/myHeader.vue";
import MyInput from "../components/myInput.vue";
import MyList from "../components/myList.vue";
import MyMask from "../components/myMask.vue";
// @ is an alias to /src
import { reactive, toRefs } from "vue";
import { useStore } from 'vuex';
export default {
  name: "Home",
  components: {
    MyHeader,
    MyInput,
    MyList,
    MyMask,
  },
  setup(props) {
    const {commit} = useStore();
    const data = reactive({
      isMask: false,
      isColor: false,
      list:[], // 添加的数据
    });
    const cutColor = () => { // 切换主题的点击事件
       data.isMask = false;
       setTimeout(() => {
         data.isMask = true;
         data.isColor = true;
       }, 600);
    }
    const hideColor = (val) => {
       data.isMask = false;
       commit('cutBack', val);
       data.isColor = false;
    }
    const addList = (val) => {
      let obj = {
        msg: val,
        flag: 0, // 0 未完成，1已完成，2已取消
        time: new Date().toLocaleDateString()
      }
      data.list.push(obj);
    }
    return {
      ...toRefs(data),
      cutColor,
      hideColor,
      addList
    };
  },
};
</script>
<style lang="scss" scoped>
li {
  width: 120px;
  margin: 40px auto;
  font-size: 18px;
  border-radius: 6px;
  line-height: 40px;
  background: pink;
  text-align: center;
  color: #fff;
}
.back-ct{
  height: 100%;
  background: #fff;
  overflow: hidden;
  .color-ct{
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    span{
      width: 20px;
      height: 20px;
    }
  }
  h4{
    text-align: center;
    margin: 20px 0;
  }
}
</style>
